import React from "react";
//引入封装好的接口
import { hotList } from "../util/axios";
import "../assets/css/hotRank.css"
// 引入导航链接
// import { Link } from "react-router-dom";
class HotRank extends React.Component {
  constructor() {
    super();
    this.state = {
      hotList: [],
    };
  }
  componentDidMount() {
    //组件挂载
    this.getHotList();
  }
  //封装一个获取热门榜单的接口
  getHotList() {
    hotList().then((res) => {
      // console.log(res, "热门榜单");
      if (res.code === 200) {
        this.setState({
          hotList: res.playlist.tracks.filter((item, i) => i < 20),
        });
      }
    });
  }
  //封装一个跳转播放详情页事件
  goPlay(id) {
    //通过state方式进行传值
    // this.props.history.push({
    //     pathname:'/play',
    //     state:{
    //         id
    //     }
    // })
    this.props.history.push("/play?id=" + id);
  }
  render() {
    const { hotList } = this.state;
    return (
      <div>
        <div className="hotop">
          <div className="hotopct">
            <div className="u-hmsprt hoticon"></div>
            <div className="hottime">更新日期：01月28日</div>
          </div>
        </div>
        <ul>
          {/* {hotList.map((item, idx) => {
            return (
              <li key={item.id}>
                {idx + 1}、{item.songname}
              </li>
            );
          })} */}
          {/* 路由导航进行跳转 */}
          {/* {hotList.map((item, idx) => {
            return (
                <Link to={
                    {
                        pathname:'/play',
                        state:{
                            id:item.id
                        }
                    }
                } key={item.id}><li>
                {idx + 1}、{item.name}
              </li></Link>
              
            );
          })} */}
          {/* 通过编程式导航进行跳转 */}
          {hotList.map((item, idx) => {
            return (
              <li onClick={this.goPlay.bind(this, item.id)} key={item.id}>
                {idx + 1}、{item.name}
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}
export default HotRank;
